<template>
  <div class="myInput">
    <span class="titleClass" :style="titleStyle" v-show="props.titleName">{{ props.titleName }}</span>
    <div class="input-container">
      <el-input
        :style="inputStyle"
        v-model="inputValue"
        @change="(e) => emit('update:modelValue', e)"
        :placeholder="placeholder"
        :disabled="disabled"
        :type="type"
        :clearable="clearable"
        :maxlength="maxlength"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { computed } from 'vue'

const props = defineProps({
  // 输入框前方的名字
  titleName: {
    type: String,
    default: ''
  },
  // 这个参数名不能更改
  modelValue: {
    // type: [String, Number, null],
    type: [String, Number, null] as PropType<string | number | null>,
    default: null
  },
  titleMinWidth: {
    type: String,
    default: '70px'
  }, // 名字所占的宽度,默认为'70px'
  width: {
    type: String,
    default: '218px'
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'text'
  },
  maxlength: {
    type: Number,
    default: 100
  }
})

const emit = defineEmits(['update:modelValue'])
const inputValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const titleStyle = computed(() => `min-width: ${props.titleMinWidth};`)
const inputStyle = computed(() => `width: ${props.width}!important;`)

</script>
<style lang="scss" scoped>
.myInput {
  display: flex;
  text-align: left;
  align-items: center;
  .titleClass {
    text-align: right;
    font-size: 14px;
    margin-right: 8px;
  }
}
</style>
